<template>
  <div class="dg-column-filter" v-clickoutside="hideMenu">
    <button ref="btnInstance" :class="config.columnFilterButtonClass"
            :style="[{width: filterBtnWidth + 'px'}, config.columnFilterButtonStyle]" @click="toggleMenu">
      <i class="va-icon-cog"></i>
    </button>
    <ul class="dg-column-config-menu" ref="columnMenu"
        :style="{display: visible ? 'block':'none', top: filterBtnHeight + 10 + 'px'}">
      <li v-for="col in columnsCopy" :key="col.field" v-if="!col.disableHidden || (col.disableHidden && col.origin.subColumns)">
        <checkbox :disabled="col.disableHidden" :label="col.title" :value="!col.hide" :style="{paddingLeft: (col.level * 20 + 10) + 'px'}"  @input="onCheckStateChange(col)"></checkbox>
      </li>
    </ul>
  </div>
</template>

<script>
  import _ from 'lodash'
  import Utils from '../utils'
//  import Vue from 'vue'
  import Clickoutside from '../../libs/directives/clickoutside'
  import Checkbox from '../components/Checkbox.vue'
  import Locales from './../locales'
  export default {
    directives: { Clickoutside },
    components: {Checkbox},
    props: {
      config: {
        type: Object,
        default () {
          return {}
        }
      },
      columns: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        visible: false,
        filterBtnHeight: 32,
        filterBtnWidth: Utils.scrollBarWidth,
        columnsCopy: []
      }
    },
    methods: {
      initColumns () {
        let cols = this.columns
        let columnsCopy = []
        let recursive = function (cols, arr = []) {
          for (let i = 0; i < cols.length; i++) {
            cols[i].level = cols[i].level ? cols[i].level : 0
            if (!_.isNil(cols[i].parent)) {
              cols[i].level = cols[i].parent.level + 1
            }
            arr.push({title: cols[i].title, field: cols[i].field, hide: cols[i].hide, level: cols[i].level, disableHidden: cols[i].disableHidden, origin: cols[i]})
            if (cols[i].subColumns) {
              recursive(cols[i].subColumns, arr)
            }
          }
        }
        if (cols && cols.length > 0) {
          recursive(cols, columnsCopy)
        }
        this.columnsCopy = columnsCopy
      },
      onCheckStateChange (col) {
        let vm = this
        col.hide = !col.hide
        col.origin.hide = col.hide
        // 向下
        let downFun = function (subCols) {
          if (subCols) {
            _.forEach(subCols, item => {
              item.hide = col.hide
              _.forEach(vm.columnsCopy, val => {
                if (val.title === item.title) {
                  val.hide = item.hide
                }
              })
              downFun(item.subColumns)
            })
          }
        }
        downFun(col.origin.subColumns)
        let upFun = function (parent) {
          if (parent) {
            if (col.hide) {
              parent.num = 0
              _.forEach(parent.subColumns, val => {
                if (val.hide === col.hide) {
                  parent.num ++
                }
              })
              if (parent.num === parent.subColumns.length) {
                parent.hide = col.hide
                _.forEach(vm.columnsCopy, val => {
                  if (val.title === parent.title) {
                    val.hide = parent.hide
                  }
                })
              }
            } else {
              parent.hide = col.hide
              _.forEach(vm.columnsCopy, val => {
                if (val.title === parent.title) {
                  val.hide = parent.hide
                }
              })
            }
            upFun(parent.parent)
          }
        }
        upFun(col.origin.parent)
        this.$emit('column-change')
      },
      toggleMenu () {
        this.visible = !this.visible
      },
      hideMenu () {
        this.visible = false
      },
      initConfig () {
        this.filterBtnHeight = this.$refs.btnInstance.clientHeight
        this.initColumns()
        if (!this.config.columnFilterButtonClass && !this.config.columnFilterButtonClass) {
          this.$set(this.config, 'columnFilterButtonClass', 'btn btn-xs btn-link-dark')
        }
      }
    },
    mounted () {
      this.initConfig()
    },
    computed: {
      locale () {
        return Locales.ZH_CN
      }
    },
    watch: {
      columns () {
        this.initColumns()
      },
      config () {
        this.initConfig()
      }
    }
  }
</script>
